// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import com.nokia.meego 1.0
import "../Script.js" as Script

Page{
    id: page
    property string title : "France"
    property string imageDefURL

    onVisibleChanged: {
        Script.loadImage(imageDefault,imageTrafic, page);
    }

    Image {
        id: pageHeader
        anchors {
            top: page.top
            left: page.left
            right: page.right
        }

        height: parent.width < parent.height ? 72 : 46
        width: parent.width
        source: "image://theme/meegotouch-view-header-fixed" + (theme.inverted ? "-inverted" : "")
        z: 1

        Label {
            id: header
            anchors {
                verticalCenter: parent.verticalCenter
                left: parent.left
                leftMargin: 16
            }
            platformStyle: LabelStyle {
                fontFamily: "Nokia Pure Text Light"
                fontPixelSize: 32
            }
            text: page.title
        }

        BusyIndicator {
            id: busyindicator
            x: 294
            y: 15
            width: 50
            height: 50
            anchors.top: parent.top
            opacity: 0;
            anchors.topMargin: 15
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 15
            anchors.right: parent.right
            anchors.rightMargin: 21
            Behavior on opacity { NumberAnimation { duration: 600 }}
        }
        ProgressBar{
            id: progress
            anchors.top: busyindicator.bottom
            anchors.right: parent.right
            anchors.rightMargin: 21
            opacity: 0
            Behavior on opacity { NumberAnimation { duration: 600 }}

        }
    }
    tools: ToolBarLayout {
            id: toolBarLayout
            ToolIcon {
                   platformIconId: "toolbar-back"
                   onClicked: {
                       pageStack.pop();
                   }
               }
        }

    Image{
        id: imageDefault
        fillMode: Image.PreserveAspectFit
        anchors.top: pageHeader.bottom
        anchors.topMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        source: imageDefURL
        asynchronous: true
        cache: false
        clip: true
        smooth: true
        onSourceChanged: {
            console.debug("Source Changed " + source)
        }
        onProgressChanged: console.debug("Progress " + progress)
    }

    Image {
        id: imageTrafic
        fillMode: Image.PreserveAspectFit
        anchors.top: pageHeader.bottom
        anchors.topMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0

//        source: "http://moloetkolo.m.o.pic.centerblog.net/8trwsckf.jpg"

    }
}
